<template>
    <div ref="donutChart" :style="{ width: width, height: height }"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'DonutChart',
    props: {
        seriesName: {
            type: String,
            default: () => {
                return ''
            }
        },
        height: {
            type: String,
            default: () => {
                return '100%'
            }
        },
        width: {
            type: String,
            default: () => {
                return '100%'
            }
        },
        legendList: {
            type: Array,
            required: false,
            default: () => {
                return ['曲线A', '曲线B', '曲线C']
            }
        },
        xAxisList: {
            type: Array,
            required: false,
            default: () => {
                return ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        },
        seriesList: {
            type: Array,
            required: false,
            default: () => {
                return [
                    {
                        name: '曲线A',
                        type: 'line',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '曲线B',
                        type: 'line',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '曲线C',
                        type: 'line',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    }
                ]
            }
        },
    },
    data() {
        return {
            colors: [
                '#3383FF', // 天蓝色
                '#FF5733', // 橙红色
                '#FF8333', // 橙黄色
                '#FF33A1', // 粉红色
                '#33FF57', // 绿黄色
                '#FF3383', // 浅紫红色
                '#3357FF', // 蓝紫色
                '#33FFD1', // 青绿色
                '#D1FF33', // 黄绿色
                '#8333FF', // 蓝紫色（偏深）
            ]
        }
    },
    watch: {
        legendList: {
            handler(v) {
                this.initChart();
            }
        },
        xAxisList: {
            handler(v) {
                this.initChart();
            }
        },
        seriesList: {
            handler(v) {
                this.initChart();
            },
            deep: true
        }
    },
    mounted() {
        this.initChart();
    },
    methods: {
        listener(chartDom, myChart) {
            const resizeObserver = new ResizeObserver(() => {
                if (myChart) {
                    myChart.resize();
                }
            });
            resizeObserver.observe(chartDom);
        },
        initChart() {
            const chartDom = this.$refs.donutChart;
            const myChart = echarts.init(chartDom);
            const seriesList = this.seriesList.map((e, i) => {
                return {
                    ...e,
                    itemStyle: {
                        color: this.colors[i] || '#3383FF'
                    },
                }
            })
            const option = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: this.legendList
                },
                xAxis: {
                    type: 'category',
                    data: this.xAxisList
                },
                yAxis: {
                    type: 'value'
                },
                series: seriesList,
                dataZoom: [
                    {
                        type: 'slider', // 会创建一个滑动条来选择区域
                        start: 0, // 初始选中范围的开始百分比
                        end: 100, // 初始选中范围的结束百分比
                    },
                    {
                        type: 'inside', // 会使图表内的数据区域可以拖拽和缩放
                        start: 0,
                        end: 100,
                    }
                ],
            };
            myChart.setOption(option);
            this.listener(chartDom, myChart)
        },
    },
};
</script>

<style scoped>
/* 你可以在这里添加组件的样式 */
</style>